<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01_Vue的data的watch</title>
  <!-- 
  在 Vue 3 中， `watch`  是一个用于观察数据变化的功能。它允许开发者在数据变化时执行特定的操作，可以用于异步操作、数据验证或在数据变化时执行副作用。
  1. 基本用法
  `watch`  可以在  `setup`  函数中使用，通常用于响应式数据的变化。基本语法如下：
  import { ref, watch } from 'vue';

  export default {
    setup() {
      const count = ref(0);

      watch(count, (newValue, oldValue) => {
        console.log(`count 的值从 ${oldValue} 变为 ${newValue}`);
      });

      return {
        count,
      };
    },
  };
  在这个例子中，当  `count`  的值发生变化时， `watch`  会触发，并输出新旧值。

  2. 观察多个数据
  可以同时观察多个数据，使用数组语法：
  import { ref, watch } from 'vue';

  export default {
    setup() {
      const firstName = ref('张');
      const lastName = ref('三');

      watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
        console.log(`名字从 ${oldFirstName} 变为 ${newFirstName}`);
        console.log(`姓氏从 ${oldLastName} 变为 ${newLastName}`);
      });

      return {
        firstName,
        lastName,
      };
    },
  };
  3. 深度观察
  如果需要观察对象内部的变化，可以使用  `{ deep: true }`  选项：
  import { ref, watch } from 'vue';

  export default {
    setup() {
      const user = ref({ name: '张', age: 25 });

      watch(user, (newValue, oldValue) => {
        console.log(`用户信息变化:`, newValue);
      }, { deep: true });

      return {
        user,
      };
    },
  };
  4. 立即执行
  如果希望在创建  `watch`  时立即执行回调，可以使用  `{ immediate: true }`  选项：
  import { ref, watch } from 'vue';

  export default {
    setup() {
      const message = ref('Hello');

      watch(message, (newValue) => {
        console.log(`消息: ${newValue}`);
      }, { immediate: true });

      return {
        message,
      };
    },
  };
  5. 注意事项
  - 性能考虑：在观察大型对象或数组时，深度观察可能会影响性能，因此应谨慎使用。
  - 清理：如果在  `watch`  中使用了副作用（如事件监听），记得在组件销毁时进行清理。

  总结
  -  `watch`  功能：用于观察响应式数据的变化，并在变化时执行特定操作。
  - 多数据观察：可以同时观察多个数据，使用数组语法。
  - 深度观察：可通过  `{ deep: true }`  选项观察对象内部的变化。
  - 立即执行：通过  `{ immediate: true }`  选项可以在创建时立即执行回调。
  -->
</head>
<body>

  <div id="app">
    <h3>{{ message }} - {{ user }}</h3>

    <button @click="changeMessage">changeMessage</button>
  </div>

  <script src="../lib/vue.js"></script>
  <script>
    const { createApp, ref, watch } = Vue;

    createApp({
      setup() {
        const message = ref('Hello watch');
        const user = ref({ name: '张', age: 25 });

        watch([user, message], (newValue, oldValue) => {
          console.log(`用户信息变化:`, newValue, oldValue);
        });
        
        const changeMessage = () => {
          message.value = 'Hello watch 2';
          user.value.name = 'watch-name';
        }

        return {
          user,
          message,
          changeMessage
        };
      }
    }).mount('#app');

  </script>
  
</body>
</html>